<template>
	<view class="">
		<w-navbar title="购物车" titleColor="black" backgroundColor="white"></w-navbar>
		<w-container isTabbar>
			<template>
				<view class="top_box fr-ac-jsb">
					<view class="fs-17">
						购物车
					</view>
					<view @click="editStatusChange()" v-if="!isEdit" class="">
						编辑
					</view>
					<view @click="editStatusChange()" v-else class="">
						完成
					</view>
				</view>
				<view class="content">
					<template v-if="goods_cart_info.length">
						<view class="shopping_list">
							<view @click="checkGoods(item)" class="shopping_item fr-ac"
								v-for="(item,index) in goods_cart_info" :key="index">
								<view class="fr-ac-jc check_box"
									:style="{'borderColor':item.isCheck?PUBLIC_STYLE.color:'','backgroundColor':''}">
									<view v-show="item.isCheck" class="iconfont icon-select-bold"
										:style="{'color': PUBLIC_STYLE.color}"></view>
								</view>
								<view class="item_img">
									<image :src="ossURL + item.goods.image" mode=""></image>
								</view>
								<view class="item_content">
									<view class="goods_name">
										{{item.goods.title}}
									</view>
									<view class="">
										<view class="goods_size">
											{{item.sku_name}}
										</view>
									</view>
									<!-- <view class="goods_detail">
										剩余129件
									</view> -->
									<view class="fr-ac-jsb">
										<view class="" style="position: relative;">
											<text class="goods_price">
												￥{{countTotalPrice(item.price,item.nums)}}
											</text>
											<!-- <text class="goods_price_native">
												￥价格
											</text> -->
										</view>
										<u-number-box inputWidth="25" button-size="22" color="#000" bgColor="#ffffff"
											iconStyle="color: #999" :step="1" integer v-model="item.nums"
											@change="goodsNumsChange($event,item.id)"></u-number-box>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="fr-ac-jc" style="width: 100%;height: 50vh;">
							<u-loadmore status="nomore" nomoreText="暂无数据" />
						</view>
					</template>
				</view>
				<view class="bottom_box fr-ac-jsb">
					<view @click="checkAllgoods" class="fr-ac">
						<view class="fr-ac-jc check_box"
							:style="{'borderColor':isAllCheck?PUBLIC_STYLE.color:'','backgroundColor':''}">
							<view v-show="isAllCheck" class="iconfont icon-select-bold"
								:style="{'color': PUBLIC_STYLE.color}"></view>
						</view>
						<view class="ml-20 mb-5">
							全选
						</view>
					</view>

					<view class="fr-ac">
						<view class="text">
							已选{{countGoodsCheck}}件合计:
						</view>
						<view class="price">
							￥{{countAllTotalPrice}}
						</view>
						<view @click="goodsBalance" v-if="!isEdit" class="buy">
							结算
						</view>
						<view @click="goodsDelete" v-else class="delete">
							删除
						</view>
					</view>
				</view>
			</template>
		</w-container>
		<w-tabbar></w-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isAllCheck: false,

				goods_cart_info: [],

				isEdit: false,
			}
		},
		watch: {

		},
		computed: {
			countAllTotalPrice() {
				let count = 0
				if (this.goods_cart_info.length) {
					this.goods_cart_info.map((item, index) => {
						if (item.isCheck) {
							count += Number(item.price) * Number(item.nums)
						}
					})
				}
				return count.toFixed(2)
			},
			countGoodsCheck() {
				return this.goods_cart_info.filter(item => item.isCheck).length
			},
		},
		onLoad() {
			this.get_goods_cart()
		},
		onShow() {},
		methods: {
			//计算总价
			countTotalPrice(price, num) {
				return (Number(price) * Number(num)).toFixed(2)
			},
			//获取购物车
			async get_goods_cart() {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.cart/index',
					data: {
						sceneval: 1 //1-购物车 2-直接下单
					}
				})
				uni.hideLoading()
				if (res.code == 1) {
					this.goods_cart_info = res.data.map(e => ({
						...e,
						isCheck: false
					}))
				}
			},
			goodsNumsChange(e, id) {
				this.set_nums(e.value, id)
			},
			//修改数量
			async set_nums(nums, id) {
				uni.showLoading({
					title: '飞速加载中...'
				})
				const res = await this.$http({
					url: '/addons/shop/api.cart/set_nums',
					data: {
						id: id,
						nums: nums
					}
				})
				uni.hideLoading()
				if (res.code == 1) {

				}
			},
			//删除
			async del_goods_cart(ids) {
				const res = await this.$http({
					url: '/addons/shop/api.cart/del',
					data: {
						id: ids,
					}
				})
				if (res.code == 1) {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.get_goods_cart()
				}
			},
			editStatusChange() {
				this.isEdit = !this.isEdit
				this.goods_cart_info.map(item => {
					item.isCheck = false
				})
			},
			checkAllgoods() {
				this.isAllCheck = !this.isAllCheck
				this.goods_cart_info.map(item => {
					item.isCheck = this.isAllCheck
				})
			},
			checkGoods(item) {
				item.isCheck = !item.isCheck
			},
			goodsDelete() {
				let ids = this.getIds()
				if (ids.length) {
					this.del_goods_cart(ids.toString())
				} else {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none'
					})
				}
			},
			getIds() {
				let ids = this.goods_cart_info.map(item => {
					if (item.isCheck) {
						return item.id
					}
				}) || []
				return ids
			},
			goodsBalance() {
				let ids = this.getIds().toString()
				if (ids.length) {
					uni.navigateTo({
						url: `/pages/goods/balance?ids=${ids}`
					})
				} else {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none'
					})
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		position: relative;
		background-color: rgb(250, 250, 252);
	}


	.top_box {
		width: 100%;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		background-color: white;
	}

	.bottom_box {
		height: 100rpx;
		width: 100%;
		position: sticky;
		bottom: 0;
		left: 0;
		z-index: 999;
		box-sizing: border-box;
		padding: 20rpx 40rpx;
		background-color: white;

		.text {
			color: #aaa;
		}

		.price {
			margin: 0 20rpx;
			color: red;
		}

		.buy {
			background-color: $theme-color;
			color: white;
			text-align: center;
			padding: 10rpx 50rpx;
			border: 2rpx solid transparent;
		}

		.delete {
			background-color: white;
			color: $theme-color;
			text-align: center;
			padding: 10rpx 50rpx;
			border: 2rpx solid $theme-color;
		}

	}

	.shopping_list {
		width: 100%;

		.shopping_item {
			$size: 180rpx;
			box-sizing: border-box;
			padding: 30rpx;
			margin-top: 20rpx;
			background-color: white;

			.item_img {
				margin: 0 20rpx;
				width: $size;
				height: $size;

				image {
					width: $size;
					height: $size;
				}
			}

			.item_content {
				flex: 1;
				height: $size;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods_price {
					color: red;
					font-weight: bold;
				}

				.goods_price_native {
					font-size: 22rpx;
					text-decoration: line-through
				}

				.goods_name {
					font-weight: bold;
				}

				.goods_size {
					width: 40%;
					text-align: center;
					padding: 4rpx 0;
					background-color: rgb(246, 246, 246);
					color: #aaa;
					font-size: 24rpx;
				}

				.goods_detail {
					color: #aaa;
					font-size: 24rpx;
				}
			}
		}
	}

	.check_box {
		$size: 32rpx;
		width: $size;
		height: $size;
		min-width: $size;
		min-height: $size;
		border-radius: 50%;
		padding: 4rpx;

		box-sizing: border-box;
		border: 2rpx solid #888;

		.iconfont {
			font-size: 24rpx;
			line-height: $size;
		}
	}
</style>